<template>
	<view class="newAlbumContainer">
		<p class="text-h1">新碟上架></p>

		<!--  -->
		<view class="scorllbox">
			<van-swipe :loop="true" :show-indicators="false" :autoplay="5000" lazy-render>
				<!--  -->
				<van-swipe-item >
					<view class="item" v-for="a in newAlbum.slice(0,3)" :key="a.id">
						<img class="itemImg"  :src="a.picUrl" alt="" />
						<view class="title">
							<p class="text1">{{a.name}}</p>
							<span class="text2" v-for="b in a.artists" :key="b.id">{{b.name + ' '}}</span>
						</view>
					</view>
				</van-swipe-item>
				<!--  -->
				<van-swipe-item >
					<view class="item" v-for="a in newAlbum.slice(3,6)" :key="a.id" >
						<img class="itemImg" :src="a.picUrl" alt="" />
						<view class="title">
							<p class="text1">{{a.name}}</p>
							<span class="text2" v-for="b in a.artists" :key="b.id">{{b.name + ' '}}</span>
						</view>
					</view>
				</van-swipe-item>
				<!--  -->
				<van-swipe-item >
					<view class="item" v-for="a in newAlbum.slice(9,12)" :key="a.id">
						<img class="itemImg" :src="a.picUrl" alt="" />
						<view class="title">
							<p class="text1">{{a.name}}</p>
							<span class="text2" v-for="b in a.artists" :key="b.id">{{b.name + ' '}}</span>
						</view>
					</view>
				</van-swipe-item>
				<!--  -->
				<van-swipe-item >
					<view class="item" v-for="a in newAlbum.slice(6,9)" :key="a.id">
						<img class="itemImg" :src="a.picUrl" alt="" />
						<view class="title">
							<p class="text1">{{a.name}}</p>
							<span class="text2" v-for="b in a.artists" :key="b.id">{{b.name + ' '}}</span>
						</view>
					</view>
				</van-swipe-item>
			</van-swipe>
		</view>
	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { newAlbumApi } from '../../api/homeApi.js'

let newAlbum = ref([]) // 新专辑数据

let getNewAlbum = () => {
	newAlbumApi().then(res => {
		newAlbum.value = res.data.albums
		// console.log(newAlbum)
		console.log(newAlbum.value.slice(0,3))
		console.log(newAlbum.value.slice(3,6))
		console.log(newAlbum.value.slice(6,9))
		console.log(newAlbum.value.slice(9,12))
	})
}

onMounted(() => {
	getNewAlbum()
})
</script>

<style lang="scss" scoped>
@import url('uni-indexNewAlbum.scss');
</style>
